﻿<template>
  <van-popup v-model="visible" position="bottom">
    <div>
      <van-steps
        v-if="steps.length"
        :active="currentStepIndex"
        active-icon="success"
        active-color="#38f"
      >
        <van-step v-for="item in steps" :key="item.Id">{{
          item.Label
        }}</van-step>
      </van-steps>
      <van-form :loading="loading">
        <van-field
          v-model="formFields.Text"
          name="Text"
          label="摘要"
          :rules="[{ required: true, message: '必填' }]"
        />
        <VanFieldSelectPicker
          name="ApplicantUserId"
          label="申请人"
          v-model="formFields.ApplicantUserId"
          :columns="useroption"
          :option="option"
        />
        <VanFieldSelectPicker
          name="Grade"
          label="紧急程度"
          v-model="formFields.Grade"
          :columns="grades"
          :option="optiontype"
        />
        <van-field v-model="formFields.Remarks" name="Remarks" label="备注" />
        <VanFieldSelectPicker
          name="SubType"
          label="类型"
          v-model="formFields.SubType"
          :columns="types"
          :option="optiontype"
        />
        <van-field
          v-model="formFields.Flag"
          name="Flag"
          :label="entity.Unit || '数值'"
        />
        <VanFieldCalendar
          name="ExpectedDate"
          label="期望完成日期"
          v-model="formFields.ExpectedDate"
        />
        <van-field name="Appendix" label="附件">
          <template #input>
            <c-upload-file
              v-model="formFields.Appendix"
              :max-count="1"
              accept=""
            />
          </template>
        </van-field>

        <van-list v-if="comments.length">
          <van-cell v-for="item in comments" :key="item.Id">
            <template #icon>
              <van-image
                width="36"
                height="36"
                round
                alt="avatar"
                :src="item.Avatar | AvatarFilter"
              />
            </template>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span>
                {{ item.CreatorName }}
                <span v-show="item.RoleNames">({{ item.RoleNames }})</span>
                {{ item.CreateTime }} {{ item.Status | statusFilter }}</span
              >
            </template>
            <template #label>
              <span>{{ item.Remarks }}</span>
            </template>
          </van-cell>
        </van-list>

        <div style="margin: 16px; text-align:center;">
          <div v-if="status === 1">
            <van-radio-group v-model="approve" direction="horizontal">
              <van-radio :name="100">通过</van-radio>
              <van-radio :name="2">驳回上一级</van-radio>
              <van-radio :name="3">驳回重提</van-radio>
              <van-radio :name="4">否决</van-radio>
            </van-radio-group>
            <van-cell-group>
              <van-field v-model="remark" placeholder="意见" />
            </van-cell-group>
          </div>
          <van-button
            style="margin-left:16px;"
            v-if="status === 1 && entity.CreatorId === userInfo.Id"
            type="danger"
            @click="handleDelete()"
            >废弃</van-button
          >
          <van-button
            style="margin-left:16px;"
            v-if="status === 1 && entity.UserIds.indexOf(userInfo.Id) !== -1"
            type="info"
            @click="handleEvent()"
            >审批</van-button
          >
          <van-button
            style="margin-left:16px;"
            v-if="status === 0"
            type="info"
            @click="handlePreStep()"
            >预览流程</van-button
          >
          <van-button
            style="margin-left:16px;"
            v-if="status === 0"
            type="info"
            @click="handleSubmit()"
            >提交</van-button
          >
          <van-button
            style="margin-left:16px;"
            type="default"
            @click="handleCancel()"
            >关闭</van-button
          >
        </div>
      </van-form>
    </div>
  </van-popup>
</template>

<script>
import {
  OA_UserForm_GetTheData,
  OA_UserForm_SaveData,
  OA_UserForm_PreData,
  OA_UserForm_EventData
} from "@/api/OA_Manage/OA_UserForm";
import { OA_DefType_GetDataList } from "@/api/OA_Manage/OA_DefType";
import moment from "moment";
import CUploadFile from "@/components/CUploadFile";
import { mapGetters, mapActions } from "vuex";
import VanFieldCalendar from "@/components/VanField/VanFieldCalendar";
import VanFieldSelectPicker from "@/components/VanField/VanFieldSelectPicker";

const statusMap = {
  0: {
    status: "default",
    text: "未开始",
    stepstatus: "wait"
  },
  1: {
    status: "processing",
    text: "审批中",
    stepstatus: "process"
  },
  2: {
    status: "error",
    text: "驳回上一级",
    stepstatus: "error"
  },
  3: {
    status: "error",
    text: "驳回重提",
    stepstatus: "error"
  },
  4: {
    status: "error",
    text: "否决",
    stepstatus: "error"
  },
  5: {
    status: "warning",
    text: "废弃",
    stepstatus: "error"
  },
  6: {
    status: "warning",
    text: "挂起",
    stepstatus: "wait"
  },
  7: {
    status: "processing",
    text: "恢复",
    stepstatus: "process"
  },
  8: {
    status: "error",
    text: "操作失败",
    stepstatus: "error"
  },
  99: {
    status: "processing",
    text: "部分审批",
    stepstatus: "process"
  },
  100: {
    status: "success",
    text: "通过",
    stepstatus: "finish"
  }
};

export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  components: {
    CUploadFile,
    VanFieldCalendar,
    VanFieldSelectPicker
  },
  data() {
    return {
      visible: false,
      loading: false,
      formFields: {
        Grade: 0,
        Remarks: "",
        Appendix: "",
        ApplicantUserId: "",
        ExpectedDate: "",
        SubType: "",
        Flag: "",
        Text: ""
      },
      entity: {},
      currentStepIndex: 0,
      comments: [],
      steps: [],
      useroption: [],
      types: [],
      unit: "",
      grades: [
        {
          Id: 0,
          Name: "正常"
        },
        {
          Id: 1,
          Name: "紧急"
        },
        {
          Id: 2,
          Name: "特急"
        }
      ],
      option: {
        label: "text",
        value: "value"
      },
      optiontype: {
        label: "Name",
        value: "Id"
      },
      approve: 100,
      remark: "",
      status: 0
    };
  },
  mounted() {
    this.GetAllUser().then(res => {
      this.useroption = res;
    });
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text;
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    ...mapActions(["GetAllUser"]),

    openForm(id, title, type, key, jsonId, jsonVersion, json) {
      //参数赋值
      this.loading = true;

      //组件初始化
      this.init();

      //编辑赋值
      if (id) {
        this.$nextTick(() => {
          OA_UserForm_GetTheData({ id: id }).then(resJson => {
            this.entity = resJson.Data;
            this.status = this.entity.Status;
            this.comments = resJson.Data.Comments;
            this.steps = resJson.Data.Steps;
            this.currentStepIndex = resJson.Data.CurrentStepIndex;

            Object.keys(this.formFields).forEach(item => {
              this.formFields[item] = this.entity[item];
            });

            this.loading = false;
          });
        });
      } else {
        this.formFields.Type = type;
        this.formFields.DefFormId = key;
        this.formFields.DefFormName = title;
        this.formFields.DefFormJsonId = jsonId;
        this.formFields.DefFormJsonVersion = jsonVersion;
        this.formFields.WorkflowJSON = json;
        this.formFields.ApplicantUserId = this.userInfo.Id;

        this.loading = false;
      }

      this.$nextTick(() => {
        var queryParam = {
          condition: "Type",
          keyword: type
        };
        OA_DefType_GetDataList({
          Search: queryParam
        }).then(resJson => {
          this.types = resJson.Data;
          if (!this.entity.Unit && this.types.length > 0) {
            this.entity.Unit = this.types[0].Unit;
          }
        });
      });
    },
    init() {
      this.entity = {};
      this.visible = true;
      this.formFields = {
        Grade: 0,
        Remarks: "",
        Appendix: "",
        ApplicantUserId: "",
        ExpectedDate: "",
        SubType: "",
        Flag: "",
        Text: ""
      };
      this.remark = "";
      this.approve = 100;
      this.status = 0;
    },

    handleSubmit(value) {
      this.entity = Object.assign(this.entity, this.formFields);
      this.entity.ApplicantUser = this.useroption.find(
        d => d.value == this.entity.ApplicantUserId
      ).text;
      // this.entity.ApplicantDepartmentId = this.useroption.find(
      //   d => d.Id == this.entity.ApplicantUserId
      // ).DepartmentId;

      this.loading = true;
      OA_UserForm_SaveData(this.entity).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast("操作成功");
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    },

    handlePreStep() {
      this.entity = Object.assign(this.entity, this.formFields);
      this.entity.ApplicantUser = this.useroption.find(
        d => d.value == this.entity.ApplicantUserId
      ).text;
      // this.entity.ApplicantDepartmentId = this.useroption.find(
      //   d => d.Id == this.entity.ApplicantUserId
      // ).DepartmentId;

      this.loading = true;
      OA_UserForm_PreData(this.entity).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast("操作成功");
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    },

    handleEvent() {
      if (this.remark === null || this.remark === "") {
        this.$toast("请填写意见");
        return;
      }
      this.loading = true;
      const myEvent = {
        EventName: "MyEvent",
        EventKey: this.entity.Id + this.entity.CurrentStepId,
        UserId: this.userInfo.Id,
        UserName: this.userInfo.UserName,
        Status: this.approve,
        Remarks: this.remark
      };
      OA_UserForm_EventData({
        ...myEvent
      }).then(resJson => {
        this.loading = false;

        if (resJson.Success) {
          this.$toast(resJson.Msg);
          this.afterSubmit();
          this.visible = false;
        } else {
          this.$toast(resJson.Msg);
        }
      });
    },

    handleDelete() {
      if (this.remark === null || this.remark === "") {
        this.$toast("请填写意见");
        return;
      }
      this.loading = true;
      this.$http
        .post("/OA_Manage/OA_UserForm/DisCardData", {
          id: this.entity.Id,
          remark: this.remark
        })
        .then(resJson => {
          this.loading = false;

          if (resJson.Success) {
            this.$toast("废弃成功!");
            this.afterSubmit();
            this.visible = false;
          } else {
            this.$toast(resJson.Msg);
          }
        });
    },
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>

<style lang="less">
.van-radio__label {
  font-size: 12px;
}
</style>
